<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>iToken - 管理员管理</title>
    <th:block th:include="includes/head :: head"></th:block>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        管理员管理
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">控制面板</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-info box-info-search" style="display: none;">
                <div class="box-header">
                    <h3 class="box-title">高级搜索</h3>
                </div>

                <div class="box-body">
                    <div class="row form-horizontal">
                        <div class="col-xs-12 col-sm-3">
                            <div class="form-group">
                                <label for="username" class="col-sm-4 control-label">姓名</label>

                                <div class="col-sm-8">
                                    <input id="username" class="form-control" placeholder="姓名" />
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-3">
                            <div class="form-group">
                                <label for="email" class="col-sm-4 control-label">邮箱</label>

                                <div class="col-sm-8">
                                    <input id="email" class="form-control" placeholder="邮箱" />
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-3">
                            <div class="form-group">
                                <label for="phone" class="col-sm-4 control-label">手机</label>

                                <div class="col-sm-8">
                                    <input id="phone" class="form-control" placeholder="手机" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-footer">
                    <button type="button" class="btn btn-info pull-right" onclick="search();">搜索</button>
                </div>
            </div>

            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">管理员列表</h3>
                </div>

                <div class="box-body">
                    <a href="#" type="button" class="btn btn-sm btn-default"><i class="fa fa-plus"></i> 新增</a>&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-sm btn-default" onclick="App.deleteMulti('/user/delete')"><i class="fa fa-trash-o"></i> 删除</button>&nbsp;&nbsp;&nbsp;
                    <a href="#" type="button" class="btn btn-sm btn-default"><i class="fa fa-download"></i> 导入</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" type="button" class="btn btn-sm btn-default"><i class="fa fa-upload"></i> 导出</a>&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-sm btn-primary" onclick="$('.box-info-search').css('display') == 'none' ? $('.box-info-search').show('fast') : $('.box-info-search').hide('fast')"><i class="fa fa-search"></i> 搜索</button>
                </div>

                <div class="box-body table-responsive">
                    <table id="dataTable" class="table table-hover">
                        <thead>
                        <tr>
                            <th><input type="checkbox" class="minimal icheck_master" /></th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<th:block th:include="includes/foot :: foot"></th:block>
<script>
    var _dataTable;

    $(function () {
        var _columns = [
            {
                "data": function (row, type, val, meta) {
                    return '<input id="' + row.userCode + '" type="checkbox" class="minimal" />';
                }
            },
            {"data": "userCode"},
            {"data": "userName"},
            {
                "data": function (row, type, val, meta) {
                    return DateTime.format(row.updateDate, "yyyy-MM-dd HH:mm:ss")
                }
            },
            {
                "data": function (row, type, val, meta) {
                    var detailUrl = "/user/detail?id=" + row.userCode;
                    var deleteUrl = "/user/delete";
                    return '<button type="button" class="btn btn-sm btn-default" onclick="App.showDetail(\'' + detailUrl + '\');"><i class="fa fa-search"></i> 查看</button>&nbsp;&nbsp;&nbsp;' +
                        '<a href="/user/form?id=' + row.userCode + '" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;&nbsp;' +
                        '<button type="button" class="btn btn-sm btn-danger" onclick="App.deleteSingle(\'' + deleteUrl + '\', \'' + row.id + '\')"><i class="fa fa-trash-o"></i> 删除</button>';
                }
            }
        ];

        _dataTable = App.initDataTables("/page", _columns);
    });

    function search() {
        var username = $("#username").val();
        var phone = $("#phone").val();
        var email = $("#email").val();

        var param = {
            "username": username,
            "phone": phone,
            "email": email
        };

        _dataTable.settings()[0].ajax.data = param;
        _dataTable.ajax.reload();
    }
</script>
</body>
</html>